{% extends "base.html" %}
   {% block script %}
     
      <!-- ARBOR -->
      <script type="text/javascript" src="/static/js/jquery-1.6.1.min.js"></script>
      <script type="text/javascript" src="/static/js/arbor2.js"></script>
      <script type="text/javascript" src="/static/js/arbor-graphics.js"></script>
      <script type="text/javascript" src="/static/js/arbor-tween.js"></script>
      <script type="text/javascript" src="/static/js/renderer_with_label.js"></script>
   {% endblock %}
  
  {% block content %}
   
     <SCRIPT LANGUAGE="JavaScript">
		
		//Esta funcion es mas churra
		function test2(nodos, aristas) {
     	//Crea el sistema de logica de las paritculas
    	var sys = arbor.ParticleSystem(100, 600, 0.5, true, 30, 0.02, 0.6);
    	//crea el renderer
    	sys.renderer = Renderer("#grafico");
    
    	//Primero vamos a ver como podemos almacenar nuestros nodos
    	// Para almacenar nodos necesitamos lo siguiente:
    	// Nombre : nombre del nodo
    	// Id: id del nodo
    	// Costo: costo del nodo
    	// Por como esta mi renderer necesita de un atributo _id, y un 
    	// _costo, asi qeu llamemos noma a todo con _ al comienzo
    	//var nodos = [{
        //	_nombre: 'nodo uno',
        //	_id: '1',
        //	_costo: '150'
    	//}, {
        //	_nombre: ' nodo dos',
        //	_id: '2',
        //	_costo: '100'
    	//}, {
        //	_nombre: 'nodo tres ',
        //	_id: '3',
        //	_costo: '50'
    	//}];
    	
    	var nodos = nodos;
    	//Ahora vamos a ver como almacenar las aristas
    	//Podemos crear objetos con este formato
    	//    origen  - Id del origen
    	//    destino - Id del destino
    	//    tipo    - 'padre ' o 'antecesor '
    	//Un vector de este tipo de objetos es algo mas pesado de
    	//construir, pero seria algo asi:
    	//var aristas = [{
        //	origen: '1',
        //	destino: '2',
        //	tipo: 'padre'
    	//}, {
        //	origen: '3',
        //	destino: '1',
        //	tipo: 'antecesor'
    	//}];
    	
    	var aristas = aristas

    	//Ahora agregamos todos los nodos
    	for (var i = 0; i < nodos.length; i++) {
        	sys.addNode(nodos[i]._id, {
            	'color': '#BEBEBE',
                'shape': 'rectangle',
                'label': nodos[i]._nombre,
                'fontColor': '#000000',
                'item': nodos[i]
        	});
    	}
    	//Ahora agregamos las aristas
    	for (i = 0; i < aristas.length; i++) {
        	sys.addEdge(aristas[i].origen, aristas[i].destino, {
            	length: 0.75,
            	pointSize: 8,
            	label: aristas[i].tipo,
            	directed: true,
            	color: '#000000'
        	});        
    	}

	}
    	
    </SCRIPT>
    <body  onload="test2({{nodos}}, {{aristas}})">
		<center><div>
		<!--  button type="button" onClick="test2({{nodos}}, {{aristas}})">Graficar</button-->
		<button type="submit">
    		<a href="{{ url_for('proyectos.administracion_proyecto') }}">Volver</a>
        </button>
        </div></center>
		<canvas id="grafico" width="600" height="400" style="background-color:#FFFFFF">
	</body>
  {% endblock %}